import React,{useState} from 'react';
import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import "./style.scss"
    
    const Index = () => {
        const [loading,setloading]=useState(false)
        const [imageUrl,setimageUrl]=useState('')
        // const { loading, imageUrl } = state;
        const  beforeUpload=(file)=> {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if (!isJpgOrPng) {
                message.error('You can only upload JPG/PNG file!');
            }
            // const isLt2M = file.size / 1024 / 1024 < 2;
            // if (!isLt2M) {
            //     message.error('Image must smaller than 2MB!');
            // }
            // return isJpgOrPng && isLt2M;
        }
        const getBase64=(img, callback)=>{
            const reader = new FileReader();
            reader.addEventListener('load', () => callback(reader.result));
            reader.readAsDataURL(img);
        };
        const handleChange = info => {
            console.log(info.file.response?info.file.response:'')
            if(info.file.response){
                if(info.file.response.code===200){
                    message.success(info.file.response.mes)
                }else{
                    message.error(info.file.response.mes)
                }
            }
            if (info.file.status === 'uploading') {
                setloading(true);
                return;
            }
            if (info.file.status === 'done') {
                // Get this url from response in real world.
                getBase64(info.file.originFileObj, imageUrl =>
                    // this.setState({
                    //     imageUrl,
                    //     loading: false,
                    // }),
                    setloading(false),
                    setimageUrl(imageUrl)
                );
            }
        };
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        return (
            <div className='upLoadWrap'>
                <dl>
                    <dt>
                    <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="/upload"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                >
                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                </Upload>
                    </dt>
                    <dd>上传头像</dd>
                </dl>
            </div>
        );
    }

export default Index;
